const headerEl = document.querySelector("header");
window.addEventListener("scroll", () => {
  if (window.pageYOffset > 100) {
    if (!headerEl.classList.contains("show-bg")) {
      headerEl.classList.add("show-bg");
    }
  } else {
    headerEl.classList.remove("show-bg");
  }
});

const headerBurgerEl = document.querySelector("#header-burger");
headerBurgerEl.addEventListener("click", () => {
  if (headerEl.classList.contains("show-nav")) {
    headerEl.classList.remove("show-nav");
  } else {
    headerEl.classList.add("show-nav");
  }
});

const honorGlideEl = document.querySelector("#honor-glide");
honorGlideEl && initHonorGlide();
function initHonorGlide() {
  const honorGlide = new Glide("#honor-glide", {
    type: "carousel",
    animationTimingFunc: "ease",
    gap: 100,
    peek: {
      before: 420,
      after: 420,
    },
    breakpoints: {
      640: {
        gap: 24,
        peek: {
          before: 48,
          after: 48,
        },
      },
      768: {
        gap: 42,
        peek: {
          before: 84,
          after: 84,
        },
      },
      1024: {
        gap: 64,
        peek: {
          before: 212,
          after: 212,
        },
      },
      1280: {
        gap: 80,
        peek: {
          before: 340,
          after: 340,
        },
      },
    },
  });
  honorGlide.mount();
}

const newsGlide = new Glide("#news-glide", {
  type: "carousel",
  animationTimingFunc: "ease",
  perView: 3,
  gap: 48,
  peek: {
    before: 0,
    after: 0,
  },
  breakpoints: {
    640: {
      perView: 1,
      gap: 24,
      peek: {
        before: 48,
        after: 48,
      },
    },
    768: {
      perView: 1,
      gap: 32,
      peek: {
        before: 200,
        after: 200,
      },
    },
    1024: {
      perView: 3,
      gap: 40,
      peek: {
        before: 0,
        after: 0,
      },
    },
    1280: {
      perView: 3,
      gap: 48,
    },
  },
});
const newsGlideEl = document.querySelector("#news-glide");
newsGlideEl && newsGlide.mount();

const clientGlide = new Glide("#client-glide", {
  type: "carousel",
  autoplay: 1000,
  hoverpause: true,
  perView: 5,
  breakpoints: {
    640: {
      perView: 3,
    },
  },
});
const clientGlideEl = document.querySelector("#client-glide");
clientGlideEl && clientGlide.mount();

const historyGlideEl = document.querySelector("#history-glide");
historyGlideEl && initHistoryGlide();
function initHistoryGlide() {
  const historyGlide = new Glide("#history-glide", {
    type: "carousel",
    breakpoints: {},
  });
  const historyGlideDotsEl = document.querySelectorAll(".history-dots li");
  historyGlide.on(["run.before"], () => {
    historyGlideDotsEl.forEach((item, index) => {
      item.classList.remove("active");
    });
  });
  historyGlide.on(["mount.after", "run.after"], () => {
    historyGlideDotsEl[historyGlide.index].classList.add("active");
  });
  historyGlide.mount();

  historyGlideDotsEl.forEach((item, index) => {
    item.addEventListener("click", () => {
      historyGlide.go("=" + index);
    });
  });
}

const businessGlideEl = document.querySelector("#business-glide");
businessGlideEl && initBusinessGlide();
function initBusinessGlide() {
  const businessGlide = new Glide("#business-glide", {
    type: "carousel",
    breakpoints: {},
  });
  const businessGlideDotsEl = document.querySelectorAll(".business-dots li");
  businessGlide.on(["run.before"], () => {
    businessGlideDotsEl.forEach((item, index) => {
      item.classList.remove("active");
    });
  });
  businessGlide.on(["mount.after", "run.after"], () => {
    businessGlideDotsEl[businessGlide.index].classList.add("active");
  });
  businessGlide.mount();

  businessGlideDotsEl.forEach((item, index) => {
    item.addEventListener("click", () => {
      businessGlide.go("=" + index);
    });
  });
}

const celebritiesGlideEl = document.querySelector("#celebrities-glide");
const celebritiesGlide = new Glide("#celebrities-glide", {
  type: "carousel",
  gap: 24,
  breakpoints: {
    768: {
      peek: {
        before: 48,
        after: 48,
      },
    },
  },
});
celebritiesGlideEl && celebritiesGlide.mount();

const resourcesSortGlideEl = document.querySelector("#resources-sort-glide");
const resourcesSortGlide = new Glide("#resources-sort-glide", {
  type: "carousel",
  breakpoints: {},
});
resourcesSortGlideEl && resourcesSortGlide.mount();

const $lazyImgArr = document.querySelectorAll(".lazy-img");
const handleLazyLoadImg = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const dataSrc = img.getAttribute("data-src");
      img.setAttribute("src", dataSrc);
      img.classList.remove("lazy-img");
      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(handleLazyLoadImg);
$lazyImgArr.forEach((img) => {
  observer.observe(img);
});

const staggeringOptions = {
  delay: 300,
  distance: "50px",
  duration: 500,
  easing: "ease-in-out",
  origin: "bottom",
};
// common
ScrollReveal().reveal(".title-box>h1", { ...staggeringOptions });
ScrollReveal().reveal(".title-box>p", { ...staggeringOptions, delay: 800 });
ScrollReveal().reveal(".footer-bd-wrap", { ...staggeringOptions });
// index.html
ScrollReveal().reveal(".index-banner-font", {
  ...staggeringOptions,
  distance: 0,
  delay: 0,
  duration: 1000,
  scale: 0.3
});
ScrollReveal().reveal(".index-banner-bg", {
  ...staggeringOptions,
  distance: 0,
  delay: 500,
  duration: 1000,
});
ScrollReveal().reveal(".about-section .about-intro", {
  ...staggeringOptions,
  delay: 800,
});
ScrollReveal().reveal(".about-section .about-text", {
  ...staggeringOptions,
  delay: 1000,
});
ScrollReveal().reveal(".advantage-section .advantage-box", {
  ...staggeringOptions,
  delay: 800,
});
ScrollReveal().reveal(".honor-section .honor-box", {
  ...staggeringOptions,
  delay: 800,
});
// about.html
ScrollReveal().reveal(".history-section .history-box", {
  ...staggeringOptions,
  delay: 800,
});
ScrollReveal().reveal(".business-section .business-box", {
  ...staggeringOptions,
  delay: 800,
});
ScrollReveal().reveal(".business-section .business-dots li", {
  ...staggeringOptions,
  interval: 350,
});
ScrollReveal().reveal(".news-section .news-box", {
  ...staggeringOptions,
  delay: 1300,
});
ScrollReveal().reveal(".news-section .news-btn", {
  ...staggeringOptions,
  delay: 1600,
});
ScrollReveal().reveal(".client-section .client-box", {
  ...staggeringOptions,
  delay: 1300,
  distance: "0",
});
ScrollReveal().reveal(".contact-section .contact-box", {
  ...staggeringOptions,
  delay: 1300,
  distance: "0",
});
ScrollReveal().reveal(".contact-section .contact-content", {
  ...staggeringOptions,
  delay: 1600,
});
ScrollReveal().reveal(".contact-section .contact-form", {
  ...staggeringOptions,
  delay: 1900,
});
ScrollReveal().reveal(".process-box>ul>li>img", {
  ...staggeringOptions,
  interval: 350,
});
ScrollReveal().reveal(".process-box>ul>li>span", {
  ...staggeringOptions,
  interval: 350,
});
ScrollReveal().reveal(".business-small-box>li", {
  ...staggeringOptions,
  interval: 350,
});
// map.html
ScrollReveal().reveal(".layout-section .map-box", {
  ...staggeringOptions,
});
ScrollReveal().reveal(".layout-section .map-list>li", {
  ...staggeringOptions,
  origin: "right",
});
ScrollReveal().reveal(".core-section .core-item", {
  ...staggeringOptions,
  interval: 350,
  scale: 0.8,
});
ScrollReveal().reveal(".star-section .star-item", {
  ...staggeringOptions,
  interval: 350,
  rotate: {
    y: 90,
  },
});
// resources.html
ScrollReveal().reveal(".celebrities-section .celebrities-box", {
  ...staggeringOptions,
});
ScrollReveal().reveal(".resources-sort-section .resources-sort-bar a", {
  ...staggeringOptions,
  interval: 100,
});
ScrollReveal().reveal(".resources-sort-section .resources-sort-data", {
  ...staggeringOptions,
  delay: 1000,
});
ScrollReveal().reveal(".signing-section .signing-box a", {
  ...staggeringOptions,
  interval: 100,
});
// news.html
ScrollReveal().reveal(".news-wrap .news-item", {
  ...staggeringOptions,
  origin: "right",
});
// news-detail.html
ScrollReveal().reveal(".news-wrap.detail", {
  ...staggeringOptions,
});

const $casePostArr = document.querySelectorAll(".case-post");
$casePostArr.forEach(($casePost) => {
  $casePost.addEventListener("click", () => {});
});
